<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>The HTML Presentation Framework</title>
        <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
        <meta name="author" content="Hakim El Hattab">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
            <style>
            html,body{
                width: 100%;
                height: 100%;
                background:#0A0F23;
            }
            *{
                margin: 0;
                padding: 0;
            }
            </style>
    </head>

    <body>
        <div id="main" style="width: 100%;height:100%;"></div>
        <script src="../components/echarts-4.0.4.min.js"></script>
        <script>
            var pieChart = echarts.init(document.getElementById('main'));
            var	data=[
                {value:69, name:'计算机、通信和其他电子设备制造业'},
                {value:2, name:'信息传输、软件和信息技术服务'},
                {value:2, name:'通用设备制造业'},
                {value:34, name:'专用设备制造业'},
                {value:21, name:'航天航空和其他运输设备制造业'},
                {value:6, name:'电器机械和器材制造业'},
                {value:6, name:'仪器仪表制造业'},
                {value:4, name:'金属制品业'},
                {value:4, name:'金属冶炼和压延加工业'},
                {value:4, name:'原料和化学制品制造业'},
                {value:8, name:'橡胶和塑料制品业'},
                {value:18, name:'科学研究和技术服务业'},
                {value:1, name:'汽车制造业'},
                {value:60, name:'其他'}
            ]

            var pieOption = {
                title: {
                    text: '区域（西安）军民融合行业情况',
                    left: 'center',
                    top: "2.9%",
                    textStyle: {
                        color: '#fff',
                        fontSize: 22
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                color: ['#336c9c','#8ce8e7','#62cff1','#17d4ee','#4fac88','#59c293','#67c47b'],
                legend: { //图例组件，颜色和名字
                    left: '10%',
                    // top: '15%',
                    bottom: '5%',
					height: '80%',
					orient: 'vertical',
                    itemGap: 12, //图例每项之间的间隔
                    itemWidth: 10,
                    itemHeight: 10,
                    icon: 'rect',
                    data: ["计算机、通信和其他电子设备制造业","信息传输、软件和信息技术服务","通用设备制造业","专用设备制造业","航天航空和其他运输设备制造业","电器机械和器材制造业","仪器仪表制造业","金属制品业","金属冶炼和压延加工业","原料和化学制品制造业","橡胶和塑料制品业","科学研究和技术服务业","汽车制造业","其他"],
                    textStyle: {
                        color: '#FFF',
                        fontSize: 14
                    }
                },
                series: [{
                    name: '违规次数',
                    type: 'pie',
                    clockwise: false, //饼图的扇区是否是顺时针排布
                    minAngle: 5, //最小的扇区角度（0 ~ 360）
                    radius : '50%',
                    center: ['65%', '65%'], //饼图的中心（圆心）坐标
                    avoidLabelOverlap: true, ////是否启用防止标签重叠
                    itemStyle: { //图形样式
                        normal: {
                            borderColor: '#fff',
                            borderWidth: 1
                        }
                    },
                    label: { //标签的位置
                        normal: {
                            show: false,
                            position: 'inside', //标签的位置
                            formatter: "{c}",
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontWeight: 'bold'
                            }
                        }
                    },
                    data: data
                }]
            };

            var currentIndex = -1;
            var timer1 = setInterval(function () {
                var dataLen = pieOption.series[0].data.length;
                // 取消之前高亮的图形
                pieChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: currentIndex
                });
                currentIndex = (currentIndex + 1) % dataLen;
                // 高亮当前图形
                pieChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: currentIndex
                });
            }, 1000);
            pieChart.setOption(pieOption);
        </script>
    </body>
</html>
